<!--
* @FileDescription: 故障分析图表组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-10 12:26:07
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:26:07
-->
<template>
    <!-- 横向状态图和横向折线图及自定义y轴label -->
    <div id="comChart" style="width: 100%;height: 500px;">
    </div>
</template>
<script setup>
    import {
        computed,
        nextTick,
        reactive,
        watchEffect
    } from 'vue';
    import * as echarts from 'echarts'
    import printJS from "print-js";
    import _ from "lodash";
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const props = defineProps({
        chartList: {
            type: Object,
            default: () => {
                return {};
            },
        },
        attrObj: {
            type: Object,
            default: () => {
                return undefined
            }
        },
        toolType: {
            type: String,
            default: () => {
                return "";
            },
        },
    })
    let comChart

    function setC1(arr) {
        let xdata = []
        // 1-->2-->3
        let colors = ['rgba(212, 63, 63, 1)', 'rgba(42, 130, 228, 1)', 'rgba(121, 72, 234, 1)']
        arr.forEach(item => {
            xdata.push(item.pointId + ' ' + item.areaName + '\n' + item.placeName)
        })
        let option = {
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    type: "shadow"
                },
            },
            title: [{
                text: props.attrObj && props.attrObj.chartTitle,
                textAlign: "center",
                left: "center",
                top: 10,
            }],
            grid: {
                top: 50,
                left: 30,
                bottom: 30,
                right: 50
            },
            xAxis: [{
                type: "category",
                data: xdata,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.8)",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    color: "rgba(62, 70, 79, 1)",
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(91, 109, 128, 0.16)",
                        type: "dashed",
                    },
                },
            }],
            yAxis: [{
                    type: "value",
                    name: "次",
                    min: 0,
                    axisLabel: {
                        formatter: "{value}",
                        color: "rgba(62, 70, 79, 1)",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(91, 109, 128, 0.8)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },

                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(91, 109, 128, 0.16)",
                            type: "dashed",
                        },
                    },
                },
                {
                    type: "value",
                    name: "分钟",
                    min: 0,
                    position: "right",
                    axisLabel: {
                        formatter: "{value}",
                        color: "rgba(62, 70, 79, 1)",
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(91, 109, 128, 0.8)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(91, 109, 128, 0.16)",
                            type: "dashed",
                        },
                    },
                },
            ],
            series: [{
                type: "bar",
                name:'断线故障时长',
                barWidth: 24,
                xAxisIndex: 0,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: "rgba(80, 196, 204, 1)"
                    }
                },
                data: arr.map(item => {
                    return item.breakAccumulationTime
                }),
            }, {
                type: "bar",
                barWidth: 24,
                name:'网络故障时长',
                // stack:'1',
                xAxisIndex: 0,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: "rgba(84, 134, 204, 1)"
                    }
                },
                data: arr.map(item => {
                    return item.networkFaultAccumulationTime
                })
            }, {
                type: "bar",
                barWidth: 24,
                name:'分站故障时长',
                // stack:'1',
                xAxisIndex: 0,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: "rgba(153, 108, 245, 1)"
                    }
                },
                data: arr.map(item => {
                    return item.stationFaultAccumulationTime
                })
            }, {
                type: "bar",
                barWidth: 24,
                name:'其他故障时长',
                stack: '1',
                xAxisIndex: 0,
                yAxisIndex: 1,
                itemStyle: {
                    normal: {
                        color: "rgba(69, 209, 134, 1)"
                    }
                },
                data: arr.map(item => {
                    return item.otherFaultAccumulationTime
                })
            }, {
                name: "",
                type: "line",
                name:'故障次数',
                stack: '1',
                symbolSize: 8,
                symbol: "circle",
                xAxisIndex: 0,
                yAxisIndex: 0,
                itemStyle: {
                    normal: {
                        color: "rgba(80, 204, 183, 1)"
                    }
                },
                data: arr.map(item => {
                    return item.faultNum
                })
            }],
            // brush:{}
        };
        comChart.setOption(option, true)
    }
    watchEffect(() => {
        if (props.toolType == "13") {
            let statesrc = comChart.getDataURL({
                type: "png", //jpeg | jpeg
                pixelRatio: 1,
                backgroundColor: "#fff", //背景色白色
            });
            printJS({
                printable: statesrc, //表格的数据
                type: "image",
                imageStyle: "width:100%;height:100%; margin-bottom:0px;",
            });
        }
        if (props.toolType == "12") {
            var picInfo = comChart.getDataURL({
                type: "png",
                pixelRatio: 1.5, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
                backgroundColor: "#000",
            }); //获取到的是一串base64信息
            const elink = document.createElement("a");
            elink.download = "历史曲线图";
            elink.style.display = "none";
            elink.href = picInfo;
            document.body.appendChild(elink);
            elink.click();
            URL.revokeObjectURL(elink.href); // 释放URL 对象
            document.body.removeChild(elink);
        }
        if (props.chartList.length > 0) {
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1(props.chartList)
            })
        }else{
            nextTick(() => {
                comChart = echarts.init(document.getElementById("comChart"));
                setC1([])
            })
        }
    })
    onMounted(() => {
        window.addEventListener('resize', () => {
            comChart.resize()
        })
    })
</script>